<template>
  <div>
    <div class="addressManage"> 
      <div class="addressContent">
        <p class="title">地址管理</p>
        <SearchBar class="SearchBar" @del="del" searchKey="name" :buttons="buttons" @refresh="refresh" :serachData="serachData"/>
        <el-tree :data="treeData" node-key="id" :default-expanded-keys="[0]" :props="defaultProps" :render-content="renderContent" :expand-on-click-node="false"></el-tree>
      </div>
      <addArea ref="addArea" @refresh="refresh"/>
    </div>
  </div>
</template>

<script>
import SearchBar from "@/components/index/SearchBar";
import addArea from "./addArea";
import { getProvince,delArea,findByName } from "@/js/api/manage";
export default {
  name: "addressManage",
  components:{
    SearchBar,
    addArea,
  },
  data() {
    return {
      defaultProps: {
        label: "name",
        children: "children",
      },
      treeData: [],
      buttons:[
        {
          label: "新增地址",
          icon: "el-icon-plus",
          size:'mini',
          type:"primary",
          method: () => {
            this.$refs.addArea.show()
          }
        },
      ],
      serachData:[],
    };
  },
  created() {
    this.loadList();
  },
  methods: {
    del(){
      if(this.selectRows.length>0){
        this.utils.tips.confirm("确定要删除吗？",(val)=>{
          if(val){
            let ids = []
            for(let i of this.selectRows){
              ids.push(i.id)
            }
            this.deleteData(ids)
          }
        })
      }
    },
    async loadList() {
      await getProvince().then((response) => {
        if (response.data.state) {
          this.treeData = [response.data.data.data];
        }
      });
    },
    append(data) {
      this.$refs.addArea.show(data)
    },

    remove(node, data) {
      delArea(data.id).then(response=>{
        if(response.data.state){
          this.utils.tips.success(response.data.data.msg)
          this.loadList()
        }else{
          this.utils.tips.error(response.data.data.msg)
        }
      })
    },
    refresh(val,state){
      this.condition = val
      if(state == 'search'){
        this.filterList(val)
      }
      this.loadList()
    },
    filterList(val){
      findByName({area_name:val}).then(response=>{
        if (response.data.state) {
          this.treeData = response.data.data;
        }
      })
    },
    renderContent(h, { node, data }) {
      let html = (
      <span class="custom-tree-node">
        <span>{node.label}</span>
          <span class="nodeAction">
            <el-button size="mini" type="text" on-click={ () => this.append(data) }>新增</el-button>
            <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
          </span>
      </span>)
      if(node.label != '中国'){
        return html;
      }else{
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
          </span>)
      }
    }
  },
};
</script>

<style lang="less">
.addressManage {
  .addressContent{
    margin-top: 20px;
    background: white;
    position:relative;
    font-size: 12px;
    border-bottom: 1px solid #ebeeee;
    padding-bottom: 30px;
    .title {
      font-size: 20px;
      padding: 10px 20px;
      margin: 0;
    }
    .SearchBar{
      padding:0 10px;
      margin-bottom: 10px;
      .search{
        right: 20px;
      }
    }
  }
  .nodeAction{
    position:absolute;
    right: 20px;
  }
}
</style>